<template>
    <div>
        <top-simple-search
                @searchFun="queryFieldData"
                @addFun="addFeild"
        ></top-simple-search>
        <el-table :data="fieldList" stripe size="small" class="full-width" v-loading="loading">
            <el-table-column align="left" prop="id" label="ID" width="80">
                <template slot-scope="{ row }">
                    <span>{{ row.id }}</span>
                </template>
            </el-table-column>
            <el-table-column align="left" prop="username" label="字段名称">
                <template slot-scope="{ row }">
                    <span>{{ row.field_name }}</span>
                </template>
            </el-table-column>
            <el-table-column align="left" prop="field_key" label="字段标识">
                <template slot-scope="{ row }">
                    <span>{{ row.field_key }}</span>
                </template>
            </el-table-column>
            <el-table-column align="left" prop="field_type_id" label="字段类型">
                <template slot-scope="{ row }">
                    <span v-if="row.field_type_id === 5">字符串</span>
                    <span v-if="row.field_type_id === 10">整型</span>
                    <span v-if="row.field_type_id === 15">浮点型</span>
                    <span v-if="row.field_type_id === 20">布尔</span>
                    <span v-if="row.field_type_id === 25">日期</span>
                    <span v-if="row.field_type_id === 30">日期时间</span>
                    <span v-if="row.field_type_id === 35">单选框</span>
                    <span v-if="row.field_type_id === 40">多选框</span>
                    <span v-if="row.field_type_id === 45">下拉列表</span>
                    <span v-if="row.field_type_id === 50">多选下拉列表</span>
                    <span v-if="row.field_type_id === 55">文本域</span>
                    <span v-if="row.field_type_id === 58">富文本</span>
                    <span v-if="row.field_type_id === 60">用户</span>
                    <span v-if="row.field_type_id === 70">多选用户</span>
                    <span v-if="row.field_type_id === 80">附件</span>
                </template>
            </el-table-column>
            <el-table-column align="left" prop="order_id" label="排序">
                <template slot-scope="{ row }">
                    <span>{{ row.order_id }}</span>
                    <edit-cell
                            :id="row.id"
                            :value="row.order_id"
                            @change="changOrder"
                    ></edit-cell>
                </template>
            </el-table-column>
            <el-table-column align="left" prop="label" label="字段描述">
                <template slot-scope="{ row }">
                    <span>{{ row.description }}</span>
                </template>
            </el-table-column>
            <el-table-column align="left" label="创建人">
                <template slot-scope="{ row }">
                    <span>{{ row.creator }}</span>
                </template>
            </el-table-column>
            <el-table-column align="left" label="创建时间" width="170">
                <template slot-scope="{ row }">
                    <span>{{ row.gmt_created }}</span>
                </template>
            </el-table-column>

            <el-table-column align="left" fixed="right" label="操作" width="100">
                <template slot-scope="{ row }">
                    <delete-button @click="deleteField(row.id)"></delete-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination
                v-show="fieldPage.total > 0"
                :total="fieldPage.total"
                :page.sync="fieldPage.page"
                :limit.sync="fieldPage.per_page"
                @pagination="getFieldData"
        />
        <all-field-dialog
                :visible.sync="fieldEditVisible"
                @reloadList="getFieldData"
        ></all-field-dialog>
    </div>
</template>
<script>
    import api from "@/api/index";
    import qs from "qs";
    import AllFieldDialog from "../../components/allFieldDialog";
    import EditCell from "@/components/Common/EditCell";

    export default {
        components: {
            AllFieldDialog,
            EditCell
        },
        data() {
            return {
                queryField: "",
                id: this.$route.query.id,
                fieldList: [],
                fieldId: null,
                fieldEditVisible: false,
                fieldPage: {
                    count: 0,
                    page: 1,
                    page_num: 10,
                    total: 0,
                    per_page: 10
                },
                editFieldRow: {},
                loading:false
            };
        },
        created() {
            this.getFieldData();
        },
        methods: {
            addFeild() {
                this.fieldEditVisible = true;
            },
            //搜索字段
            queryFieldData(queryField) {
                this.queryField = queryField;
                this.fieldPage.per_page = 10;
                this.fieldPage.page = 1;
                this.getFieldData();
            },
            //获取字段列表
            getFieldData() {
                this.loading = true
                api
                    .getField(
                        this.id,
                        qs.stringify({
                            per_page: this.fieldPage.per_page,
                            page: this.fieldPage.page,
                            search_value: this.queryField
                        })
                    )
                    .then(res => {
                            this.fieldList = res.data.value;
                            this.fieldPage.per_page = res.data.per_page;
                            this.fieldPage.total = res.data.total;
                            this.fieldPage.page = res.data.page;
                            this.loading = false
                    }).catch(()=>{
                    this.loading = false
                });
            },
            //删除自定义字段
            deleteField(dedId) {
                this.$confirm("删除该消息, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(() => {
                    api.dedField(this.id, dedId).then(res => {
                            this.msgSuccess("删除成功!");
                            this.getFieldData();
                    });
                });
            },
            changOrder(row) {
                api.editField(this.id, row.id, {order_id: row.value}).then(res => {
                    this.msgSuccess("设置成功!");
                    this.getFieldData();
                });
            }
        }
    };
</script>
<style scoped>
    .text {
        width: 100px;
    }

    .query {
        display: flex;
        align-items: center;
    }
</style>
